<template>
	<view class="sun-demo-page">
		<view class="header">
			<text class="title">太阳码解码示例</text>
			<text class="subtitle">结构化解码器演示</text>
		</view>
		
		<view class="section">
			<text class="section-title">生成测试太阳码</text>
			<view class="input-group">
				<input v-model="testText" placeholder="输入测试文本" class="text-input" />
				<button @tap="generateTestCode" class="generate-btn">生成</button>
			</view>
			<view class="code-display">
				<sun-code :text="testText" :size="250" :thickness="0.8" />
			</view>
		</view>
		
		<view class="section">
			<text class="section-title">扫描太阳码</text>
			<sun-scan />
		</view>
		
		<!-- <view class="section">
			<text class="section-title">解码测试</text>
			<view class="test-buttons">
				<button @tap="testStructuredDecode" class="test-btn">结构化解码测试</button>
				<button @tap="testMatrixDecode" class="test-btn">矩阵解码测试</button>
			</view>
			<view class="test-result">
				<text class="result-label">解码结果:</text>
				<text class="result-text">{{ decodeResult || '点击测试按钮开始解码' }}</text>
			</view>
		</view>
		
		<view class="section">
			<text class="section-title">边界基准功能</text>
			<view class="feature-info">
				<view class="feature-item">
					<text class="feature-title">🎯 三个边界基准点</text>
					<text class="feature-desc">在太阳码周围120度均匀分布，提供精确定位</text>
				</view>
				<view class="feature-item">
					<text class="feature-title">🔍 自动检测</text>
					<text class="feature-desc">同心圆结构识别：外白内黑中心白</text>
				</view>
				<view class="feature-item">
					<text class="feature-title">📍 精确定位</text>
					<text class="feature-desc">通过三个基准点计算太阳码中心位置</text>
				</view>
				<view class="feature-item">
					<text class="feature-title">⚡ 提升解码</text>
					<text class="feature-desc">减少搜索范围，提高解码成功率和速度</text>
				</view>
			</view>
		</view>
		
		<view class="section">
			<text class="section-title">编码/解码流程说明</text>
			<view class="flow-info">
				<view class="flow-step">
					<text class="step-number">1</text>
					<text class="step-desc">数据编码: UTF-8字节 + 模式位(0100) + 长度(16位)</text>
				</view>
				<view class="flow-step">
					<text class="step-number">2</text>
					<text class="step-desc">极坐标布局: 按环(rings)和扇区(sectors)排列</text>
				</view>
				<view class="flow-step">
					<text class="step-number">3</text>
					<text class="step-desc">边界基准: 添加三个定位基准点(120度分布)</text>
				</view>
				<view class="flow-step">
					<text class="step-number">4</text>
					<text class="step-desc">交替方向: 偶数环正向，奇数环反向</text>
				</view>
				<view class="flow-step">
					<text class="step-number">5</text>
					<text class="step-desc">掩模应用: 8种掩模模式，选择最佳</text>
				</view>
				<view class="flow-step">
					<text class="step-number">6</text>
					<text class="step-desc">解码逆向: 检测基准→定位中心→采样→去掩模→解码</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import SunCode from '@/components/sun-code.vue'
import SunScan from '@/components/sun-scan.vue'
import { encodeSunCode, decodeSunCodeStructured } from '@/utils/suncode.js'

export default {
	name: 'SunDemoPage',
	components: {
		SunCode,
		SunScan
	},
	data() {
		return {
			testText: 'Hello 太阳码!',
			decodeResult: ''
		}
	},
	methods: {
		generateTestCode() {
			// 触发重新渲染
			this.$forceUpdate()
		},
		
		async testStructuredDecode() {
			try {
				// 生成太阳码
				const model = encodeSunCode(this.testText)
				console.log('生成的太阳码模型:', model)
				
				// 使用结构化解码器解码
				const decoded = decodeSunCodeStructured(model.matrix, model.params)
				console.log('结构化解码结果:', decoded)
				
				this.decodeResult = decoded || '解码失败'
				
				if (decoded === this.testText) {
					uni.showToast({ title: '解码成功!', icon: 'success' })
				} else {
					uni.showToast({ title: '解码结果不匹配', icon: 'none' })
				}
			} catch (e) {
				console.error('解码测试错误:', e)
				this.decodeResult = '解码错误: ' + e.message
				uni.showToast({ title: '解码失败', icon: 'error' })
			}
		},
		
		async testMatrixDecode() {
			try {
				// 生成太阳码
				const model = encodeSunCode(this.testText)
				
				// 模拟不同的矩阵状态进行测试
				const testCases = [
					{ name: '原始矩阵', matrix: model.matrix },
					{ name: '添加噪声', matrix: this.addNoise(model.matrix) },
					{ name: '部分损坏', matrix: this.corruptMatrix(model.matrix, 0.1) }
				]
				
				let results = []
				for (const testCase of testCases) {
					const decoded = decodeSunCodeStructured(testCase.matrix, model.params)
					results.push(`${testCase.name}: ${decoded || '失败'}`)
				}
				
				this.decodeResult = results.join('\n')
				uni.showToast({ title: '矩阵测试完成', icon: 'success' })
			} catch (e) {
				console.error('矩阵解码测试错误:', e)
				this.decodeResult = '矩阵测试错误: ' + e.message
			}
		},
		
		// 添加噪声到矩阵
		addNoise(matrix) {
			return matrix.map(row => 
				row.map(bit => Math.random() < 0.05 ? (bit === 1 ? 0 : 1) : bit)
			)
		},
		
		// 损坏矩阵
		corruptMatrix(matrix, ratio) {
			return matrix.map(row => 
				row.map(bit => Math.random() < ratio ? Math.floor(Math.random() * 2) : bit)
			)
		}
	}
}
</script>

<style scoped>
.sun-demo-page {
	padding: 20px;
	background: #f5f5f5;
	min-height: 100vh;
}

.header {
	text-align: center;
	margin-bottom: 30px;
}

.title {
	display: block;
	font-size: 24px;
	font-weight: bold;
	color: #333;
	margin-bottom: 8px;
}

.subtitle {
	display: block;
	font-size: 14px;
	color: #666;
}

.section {
	background: white;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.section-title {
	display: block;
	font-size: 18px;
	font-weight: bold;
	color: #333;
	margin-bottom: 15px;
}

.input-group {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.text-input {
	flex: 1;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
}

.generate-btn {
	padding: 10px 20px;
	background: #FFD700;
	color: #333;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: bold;
}

.code-display {
	display: flex;
	justify-content: center;
}

.test-buttons {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
}

.test-btn {
	flex: 1;
	padding: 10px;
	background: #007aff;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 12px;
}

.test-result {
	background: #f8f8f8;
	padding: 15px;
	border-radius: 6px;
	border-left: 4px solid #007aff;
}

.result-label {
	display: block;
	font-weight: bold;
	color: #333;
	margin-bottom: 5px;
}

.result-text {
	display: block;
	color: #666;
	font-size: 12px;
	white-space: pre-line;
}

.flow-info {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.flow-step {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: #FFD700;
	color: #333;
	border-radius: 50%;
	font-size: 12px;
	font-weight: bold;
	flex-shrink: 0;
}

.step-desc {
	flex: 1;
	font-size: 12px;
	color: #666;
	line-height: 1.4;
}

.feature-info {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.feature-item {
	background: #f8f9fa;
	padding: 15px;
	border-radius: 8px;
	border-left: 4px solid #FFD700;
}

.feature-title {
	display: block;
	font-size: 14px;
	font-weight: bold;
	color: #333;
	margin-bottom: 5px;
}

.feature-desc {
	display: block;
	font-size: 12px;
	color: #666;
	line-height: 1.4;
}
</style>
